<template>
  <div id="ar">
    <!-- 头部 -->
    <header>
      <div class="head">
        <img src="@/assets/right (1).png" alt="" @click="go" />
        <span>我的</span>
      </div>
    </header>
    <main>
      <!-- 登录注册 -->
      <nav @click="tiao" v-if="$store.state.log">
        <div class="yi-zuo">
          <img :src="fr($store.state.send)" alt="" />
        </div>
        <div class="yi-zhong">
          <div class="yi-top">
            {{ $store.state.log.username }}
          </div>
          <div class="yi-bottom">
            <span> 暂无绑定手机号</span>
          </div>
        </div>
        <svg
          t="1620825126872"
          class="icon lastnav"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1867"
          width="200"
          height="200"
        >
          <path
            d="M251.04491309 42.67302828c-14.4168832 13.6670048-14.4168832 35.84355093-4e-8 49.51164692l442.54854935 419.81859948-442.54854935 419.8033184c-14.4168832 13.67573653-14.41688319 35.84464213 0 49.52037972 14.40924268 13.67464533 37.77991892 13.67464533 52.18916163 1e-8l460.97024424-437.34305919c0 0 19.56124802-18.12479893 19.56124801-31.98063791 0-12.7697696-19.56124798-31.98827839-19.56124801-31.98827837L303.23516587 42.67302827C288.82483199 28.99729174 265.45415574 28.99729173 251.04491309 42.67302828z"
            fill="#bfbfbf"
            p-id="1868"
          ></path>
        </svg>
      </nav>
      <nav @click="tiao" v-else>
        <div class="yi-zuo">
          <img :src="img" alt="" />
        </div>
        <div class="yi-zhong">
          <div class="yi-top">
            {{ span }}
          </div>
          <div class="yi-bottom">
            <span> 暂无绑定手机号</span>
          </div>
        </div>
        <svg
          t="1620825126872"
          class="icon lastnav"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1867"
          width="200"
          height="200"
        >
          <path
            d="M251.04491309 42.67302828c-14.4168832 13.6670048-14.4168832 35.84355093-4e-8 49.51164692l442.54854935 419.81859948-442.54854935 419.8033184c-14.4168832 13.67573653-14.41688319 35.84464213 0 49.52037972 14.40924268 13.67464533 37.77991892 13.67464533 52.18916163 1e-8l460.97024424-437.34305919c0 0 19.56124802-18.12479893 19.56124801-31.98063791 0-12.7697696-19.56124798-31.98827839-19.56124801-31.98827837L303.23516587 42.67302827C288.82483199 28.99729174 265.45415574 28.99729173 251.04491309 42.67302828z"
            fill="#bfbfbf"
            p-id="1868"
            @click="vclik"
          ></path>
        </svg>
      </nav>
      <!-- 余额 -->
      <section class="yuer">
        <ul>
          <li>
            <div class="yi-shang"><span>0.00</span>元</div>
            <div class="yi-xia">我的余额</div>
          </li>
          <li>
            <div class="yi-shang"><span class="pan1">0</span>个</div>
            <div class="yi-xia">我的优惠</div>
          </li>
          <li>
            <div class="yi-shang"><span class="pan2">0</span>分</div>
            <div class="yi-xia">我的积分</div>
          </li>
        </ul>
      </section>
      <div class="yi-he"></div>
      <section class="dingdan">
        <ul>
          <li>
            <svg
              class="s1"
              data-v-617269a8=""
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 38 38"
              id="order"
            >
              <g data-v-617269a8="" fill="none" fill-rule="evenodd">
                <use
                  data-v-617269a8=""
                  stroke="#666"
                  stroke-width="4"
                  mask="url(#order-regular.41c17f8_b)"
                  xlink:href="#order-regular.41c17f8_a"
                ></use>
                <rect
                  data-v-617269a8=""
                  width="24"
                  height="2"
                  x="7"
                  y="8"
                  fill="#666"
                  rx="1"
                ></rect>
                <rect
                  data-v-617269a8=""
                  width="20"
                  height="2"
                  x="7"
                  y="17"
                  fill="#666"
                  rx="1"
                ></rect>
                <rect
                  data-v-617269a8=""
                  width="8"
                  height="2"
                  x="7"
                  y="26"
                  fill="#666"
                  rx="1"
                ></rect>
              </g>
            </svg>
            <span>我的订单</span>
          </li>
          <div class="yi-xian"></div>
          <li>
            <svg viewBox="0 0 40 40" id="point" class="s1">
              <path
                d="M34.6 7.1c0-1.1-1-2.1-2.1-2.1h-24c-1.1 0-2 1-2.1 2.1l-1.6 25C4.6 34.3 6.3 36 8.5 36h24c2.2 0 3.9-1.7 3.7-3.9l-1.6-25zm-5.9 6.1c-.2 4.6-3.7 8.2-8.3 8.2-4.6 0-8.2-3.7-8.4-8.3-.3-.2-.5-.6-.5-1 0-.7.6-1.2 1.3-1.2s1.3.6 1.3 1.2c0 .5-.3.9-.7 1.1.2 3.8 3.2 6.8 7.1 6.8 3.9 0 6.8-3.1 7-6.9-.4-.2-.6-.6-.6-1.1 0-.7.6-1.2 1.3-1.2s1.3.6 1.3 1.2c-.2.6-.4 1-.8 1.2z"
              ></path>
            </svg>
            <p>积分商城</p>
          </li>
          <div class="yi-xian"></div>
          <li>
            <svg viewBox="0 0 40 40" id="vip" class="s1">
              <path
                d="M7 33.4c0 1.1.9 1.6 2 1.6h22c1.1 0 2-.5 2-1.6V31H7v2.4z"
              ></path>
              <path
                d="M32.1 14.3c-.6 2.3-2.6 4-5.1 4-2.9 0-5.3-2.3-5.3-5.2v-.2c-.5.2-1 .3-1.6.3-.6 0-1.1-.1-1.7-.3v.2c0 2.9-2.4 5.2-5.3 5.2-2.5 0-4.6-1.7-5.1-4.1-.5.4-1.2.6-1.8.6-.3 0-.5.1-.8 0L7.2 29h26l1.7-14.2c-.3.1-.5.1-.8.1-.8 0-1.5-.2-2-.6z"
                class="st0"
              ></path>
              <ellipse cx="20.1" cy="8.2" rx="3.2" ry="3.2"></ellipse>
              <ellipse cx="6.4" cy="10.5" rx="2.4" ry="2.4"></ellipse>
              <ellipse cx="33.8" cy="10.5" rx="2.4" ry="2.4"></ellipse>
            </svg>
            <em>饿了么会员卡</em>
          </li>
        </ul>
      </section>
      <div class="yi-he"></div>
      <section class="dingdan">
        <ul>
          <li>
            <span>服务中心</span>
            <img src="@/assets/右箭头6.png" alt="" class="right">
          </li>
          <div class="yi-xian"></div>
          <li>
            <i>下载饿了么App</i>
                <img src="@/assets/右箭头6.png" alt="" class="right">
          </li>
        </ul>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      img: "//elm.cangdu.org/img/164ad0b6a3917599.jpg",
      arr: [],
      span: "登录注册",
    };
  },
  mounted() {},
  methods: {
     fr(str) {
      return "http://elm.cangdu.org/img/" + str.split("\\").join("/");
    },
    tiao() {
    this.$router.push({path:"/account"})
    
    },
    go() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="css" scoped >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-style: normal;
}
#ar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
li {
  list-style: none;
}
header {
  width: 100%;
  height: 3rem;
  background: #3190e8;
  padding: 0px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #ebf5ff;
}
.head{
  width: 12rem;
  height: 100%;
  line-height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 1rem;
  height: 1rem;
}
header span {
  color: #fff;
  font-weight: 700;
}
main {
  flex: 1;
  overflow-y: auto;
}
nav {
  width: 100%;
  height: 4.8rem;
  background: #3190e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem;
}
.right{
  width: 1.5rem;
  height: 1.5rem;
}
.yi-zuo {
  width: 2.18rem;
  height: 2.18rem;
  border-radius: 50%;
  background: white;
}
.yi-zuo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.yi-zhong {
  margin-left: 0.2rem;
  flex: 1;
}
.lastnav {
  width: 1.5rem;
  height: 1.5em;
}
.yi-top {
  width: 100%;
  height: 1rem;
  color: white;
  font-weight: 700;
  font-size: 14px;
  margin-left: 0.1rem;
}
.yi-bottom {
  width: 100%;
  height: 1.5rem;
  display: flex;
  align-items: center;
}
.yi-bottom svg {
  width: 0.3rem;
  height: 0.3rem;
}
.yi-bottom span {
  color: white;
  font-size: 14px;
}
main {
  flex: 1;
}
.yuer {
  width: 100%;
  height: 3.7rem;
}
.yi-he {
  width: 100%;
  height: 1rem;
  background: #eaeaea;
}
.yuer ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 1.7rem;
}
.yuer ul li {
  width: 33.3%;
  height: 1.7rem;
  border-left: 1px solid #eaeaea;
}
.yi-shang {
  margin-top: 1rem;
  width: 100%;
  height: 1rem;
  font-size: 14px;
  color: #000;
  text-align: center;
}
.yi-shang span {
  font-size: 18px;
  font-weight: 700;
  color: #ffa31a;
}
.yi-shang .pan1 {
  color: #ff5c3f;
}
.yi-shang .pan2 {
  color: #67c106;
}
.yi-xia {
  margin-top: 0.23rem;
  width: 100%;
  height: 0.3rem;
  font-size: 16px;
  text-align: center;
  color: #737476;
}
.dingdan {
  width: 100%;
  height: 6rem;
}
.dingdan ul {
  width: 100%;
  height: 100%;
  padding-left: 1rem;
  box-sizing: border-box;
}
.dingdan ul li {
  padding: 1rem;
  font-size: 16px;
  align-items: center;
  display: flex;
  width: 100%;
  height: 33.3%;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
}
.s1 {
  width: 1rem;
  height: 1rem;
}
#vip {
  width: 1rem;
  height: 1rem;
}
</style>